<!doctype html> 
<html> 
	<head> 
		<title>Order Form</title> 
		<meta charset="utf-8" /> 
		<meta http-equiv="X-UA-Compatible" content="chrome=1"> 
		
		<link rel="stylesheet" media="screen" href="./style/front-end.css" />		
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
		<script type="text/javascript" src="./lib/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="./lib/front-end.js"></script>
		
		<link rel="shortcut icon" href="/favicon.ico" /> 
		
		<meta name="author" content="Kerrick Long" /> 
		<meta name="date" content="5 Oct 2010" /> 
		<meta name="keywords" content="" /> 
		<meta name="description" content="" /> 
	</head> 
	<body>
		<form id="login" method="post" action="login.php">
			<fieldset>
				<legend>Please Log In</legend>
				
				<label for="sessionID">Session ID:</label>
				<input type="text" name="sessionID" id="sessionID" />
				
				<label for="sessionPassword">Password:</label>
				<input type="password" name="sessionPassword" id="sessionPassword" />
				
				<input type="submit" value="Log In" />
			</fieldset>
		</form>
		<script id="cart-tmpl" type="text/x-jquery-tmpl">
			<div id="cart"> 
				<div id="cart-meta"> 
					Welcome, ${clientName}.
				</div> 
				<ul>
					
				</ul> 
			</div>
		</script>
		<script id="cartItem-tmpl" type="text/x-jquery-tmpl">
			<li class="item-{{if session.editingItem}}${session.editingWhichItem}{{else}}${session.cart.items.total}{{/if}}">
				<div class="thumbnail"> 
					<img width="{{if session.photos[session.photoChooser.current.number].horiz}}75{{else}}50{{/if}}" height="{{if session.photos[session.photoChooser.current.number].horiz}}50{{else}}75{{/if}}" src="${session.photoChooser.current.thumbSrc}" />
				</div>
				<div class="price">
					<em>{{html session.photoChooser.current.prettyPrice}}</em>
				</div>
				<div class="info">
					<strong class="photo counter">Photo ${session.photoChooser.current.number}</strong>
					<strong class="qty counter">Prints: ${session.photoChooser.current.qty}</strong>
					<strong class="size counter">${session.photoSizes[session.photoChooser.current.size].name}</strong>
					<strong class="toggle color">{{if session.photoChooser.current.color}}Color{{else}}B/W{{/if}}</strong>
					<a class="remove button remove-${session.cart.items.total}" title="Delete this selection from your cart">Delete</a>
					<a class="edit button edit-${session.cart.items.total}" title="Change options for this selection">Edit</a>
				</div>
			</li>
		</script>
		<script id="photoChooser-tmpl" type="text/x-jquery-tmpl">
			<div id="photoChooser"> 
				<div id="photoChooser-area"> 
					<img id="photoChooser-preview" src="./style/overlay/11x14_vert.png" width="222" height="282" alt="Photograph" /> 
				</div> 
				<div id="photoChooser-options"> 
					<p> 
						<a class="previous button" title="Previuos Photograph">Previous</a> 
						<strong class="photo counter">Photo ${photoChooser.current.number}</strong> 
						<a class="next button" title="Next Photograph">Next</a> 
					</p> 
					<p> 
						<a class="smaller button" title="Smaller Photo Size">Smaller</a> 
						<strong class="size counter">${photoSizes[session.photoChooser.current.size].name}</strong> 
						<a class="larger button" title="Larger Photo Size">Larger</a> 
					</p> 
					<p> 
						<a class="fewer button" title="Order Fewer Prints">Fewer</a> 
						<strong class="qty counter">Prints: ${session.photoChooser.current.qty}</strong> 
						<a class="more button" title="Order More Prints">More</a> 
					</p> 
					<p> 
						<a class="toggle color off button" title="Change to {{if session.photoChooser.current.color}}Black and White{{else}}Color{{/if}}">{{if session.photoChooser.current.color}}Color{{else}}Black and White{{/if}}</a> 
					</p> 
					<p> 
						<a class="toggle add button" title="Add this selection to your cart and continue choosing prints">Add to Cart</a> 
					</p> 
					<p> 
						<em id="photoChooser-price">$${session.photoChooser.current.price}</em> 
					</p> 
				</div> 
			</div>
		</script>
	</body> 
</html>
